/*
 * @Author: aleimu
 * @Date: 2021-03-08 16:57:56
 * @Description: 基础路由嵌套
 */
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Route, Link, NavLink, useRouteMatch, useParams, useLocation } from 'react-router-dom';
import { useMutation, useQuery } from '@apollo/react-hooks';

import { useEffect } from 'react';

function Home(props) {
    console.log('Home=>', props);
    return <h2>Home</h2>
}

function About(props) {
    console.log('About=>', props);
    return <h2>About</h2>;
}

function Topic() {
    let { topicId } = useParams();
    return <h3>Requested topic ID: {topicId}</h3>
}

function Topics() {
    const match = useRouteMatch();
    console.log('match=>', match);
    return (
        <div>
            <h2>Topics</h2>
            <ul>
                <li>
                    <Link to={`${match.url}/components`}>Components</Link>
                </li>
                <li>
                    <Link to={`${match.url}/props-v-state`}>Props v. State</Link>
                </li>
            </ul>

            {/*
                Topics页面有自己的<Switch>，其中包含更多的路线，建立在/topics路径之上
                您可以将第二个<Route>视为所有主题的“索引”页面，或者当未选择任何主题时显示的页面
            */}
            <Switch>
                <Route path={`${match.path}/:topicId`}>
                    <Topic />
                </Route>
                <Route path={match.path}>
                    <h3>Please select a topic.</h3>
                </Route>
            </Switch>
        </div>
    );
}

function App() {
    return <BrowserRouter>
        <ScrollToTop>aaaaaa</ScrollToTop>
        <ul>
            <li>
                <Link to={'/'}>Home</Link>
            </li>
            <li>
                <Link to={'/about'}>About</Link>
            </li>
            <li>
                <Link to={'/topics'}>Topics</Link>
            </li>
            <li>
                <Link to={'/contact'}>Contact</Link>
            </li>
        </ul>

        <Switch>
            <Route path={'/about'}>
                <About />
            </Route>
            <Route path={'/topics'}>
                <Topics />
            </Route>
            {/* 如果当前URL是/ about，那么将渲染此路由，而其余路由将被忽略 */}
            {/* 请注意这两个路由的顺序。 更具体的path="/contact/id"位于path="/contact"之前，因此在查看单个联系人时将显示这个<Route> */}
            <Route path={'/contact/:id'}>
                <h2>Contact</h2>
            </Route>
            <Route path={'/contact'}>
                <h2>AllContact</h2>
            </Route>
            {/*
                如果先前的路由均未呈现任何内容，则此路由将充当后备路径。
                重要提示：路径="/"的路线将始终匹配任何路径的URL，因为所有URL均以/开头。 所以这就是为什么我们把这这个<Route>放在最后
            */}
            <Route path={'/'}>
                <Home />
            </Route>
        </Switch>
    </BrowserRouter>
}

function NavigationApp() {
    return <BrowserRouter>
        <ul>
            <li>
                <NavLink to={'/react'}>React</NavLink>
            </li>
            <li>
                <NavLink to={'/redux'}>redux</NavLink>
            </li>
        </ul>
        <div>
            <Switch>
                <Route path={'/react'}>
                    <h1>React</h1>
                </Route>
                <Route path={'/redux'}>
                    <h1>Redux</h1>
                </Route>
            </Switch>
        </div>
    </BrowserRouter>
}


function ScrollToTop() {
    const { pathname } = useLocation();
    console.log('pathname=>', pathname);
    useEffect(() => {
        window.scrollTo(0, 0);
    }, [pathname]);
    useEffect(() => {
        window.scrollTo(0, 0);
    }, []);
    return null;
}

const LAST_LAUNCH = gql`
  query lastLaunch {
    launch {
      id
      timestamp
    }
  }
`;

function LastLaunch() {
    const { loading, data } = useQuery(LAST_LAUNCH);
    return (
        <div>
            <h1>Last Launch</h1>
            {loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>}
        </div>
    );
}

function Message() {
    const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE);
    const [deleteMessage] = useMutation(DELETE_MESSAGE);
    const { data } = useQuery(GET_MESSAGE);

    return (
        <div>
            <p>
                {loading
                    ? 'Loading ...'
                    : `Message: ${data && data.message ? data.message.content : ''}`}
            </p>
            <p>
                <button onClick={() => saveMessage()}>Save</button>
                <button onClick={() => deleteMessage()}>Delete</button>
            </p>
        </div>
    );
}

const WarpApp = () => {
    return (
        <div>
            <ScrollToTop />
            <App />,
            <NavigationApp />,
            <LastLaunch />,
            <Message />,

        </div>
    )
}

export default WarpApp